<template>
  <div>
    <h1 @click="findAllFood">食品列表</h1>
    <el-button type="primary" size="min" @click="saveFood" style="margin-left: 50%">添加</el-button>
    <el-table
      :data="foodList.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()))"
      style="width: 100%;">
      <el-table-column
        prop="id"
        label="id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="名称"
        width="180">
      </el-table-column>
      <el-table-column
        prop="url"
        label="图片"
        width="180">
        <template #default="scope">
          <el-image width="80" height="80" :src="scope.row.url"/>
        </template>
      </el-table-column>
      <el-table-column
        prop="info"
        label="信息"
        width="180">
      </el-table-column>
      <el-table-column
        v-if="true"
        prop="cid"
        label="分类id"
        width="180">
      </el-table-column>
      <el-table-column
        prop="cname"
        label="分类"
        width="180">
      </el-table-column>
      <el-table-column
        prop="price"
        label="价格"
        width="180">
      </el-table-column>
      <el-table-column
        prop=""
        label="想吃"
        width="200">
        <template slot="header" slot-scope="scope">
          <el-input
            v-model="search"
            size="mini"
            placeholder="输入名称搜索"/>
        </template>
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="handleEdit(scope.row)">Edit
          </el-button>
          <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row.id)">Delete
          </el-button>
        </template>

      </el-table-column>
    </el-table>
  </div>

</template>

<script>
export default {
  name: "Food",
  data() {
    return {
      search: '',
      foodList:
        {
          id: '',
          info: '',
          price: '',
          url: '',
          name: '',
          cid: '',
          cname: ''
        }

    }
  },
  created() {
    this.findAllFood()
  },
  methods: {
    //添加，路由跳转
    saveFood(){
      this.$router.push({path: '/foodUpdate',query:{row:''}});
    },
    //修改，跳转路由
    handleEdit(row){
      this.$router.push({path: '/foodUpdate',query:{row:row}});
      console.log(row)
    },

    handleDelete(id) {
      this.$axios({
        method: 'delete',
        url: '/admin/deleteFood',
        params: {
          id
        }
      }).then(res => {
        if (res.data.code == 2000) {
          alert('删除成功')
          this.findAllFood()
          this.findAll()
        } else {
          alert('删除失败')
        }
      })
    },
    findAllFood() {
      this.$axios({
        method: 'get',
        url: '/admin/findAllFood',
      }).then(res => {
        this.foodList = res.data.data.data
      })
    }
  }
}
</script>

<style scoped>

</style>
